import React, { useState } from 'react';
import {Row, Col,Input,Radio,Select,Button,message } from 'antd';
import { postsettlement } from '../../../api/user'


export const Settlement = (props) => {

    // 保存 账号类型
    let [value, setValue] = useState("");
    // 选择 账号类型 保存
    const onChange = (e) => {
      setValue(
        value = e.target.value,
        );
        console.log('账户类型', value)
    };
  
    const { Option } = Select;

    // 保存 开户行
    let [openvalue, setopenValue] = useState("");
    // 选择 开户行 保存
    const handleChange = (value) => {
      setopenValue(
        openvalue = value
      )
      console.log(`开户行 ${openvalue}`);
    };

    // 开户人姓名
    let [namevalue,setnameValue] = useState("")

    // 开户人账号
    let [numbervalue,setnumberValue] = useState("")    

    // 确认账号
    let [surenumbervalue,setsurenumberValue] = useState("")       
    
    // 支付宝账号
    let [zfbnumbervalue,setzfbnumberValue] = useState("")     
    
    // 微信账号
    let [wxnumbervalue,setwxnumberValue] = useState("")   

    // 手机号
    let [phonenumbervalue,setphonenumberValue] = useState("")   

     // 结算信息
     let [information,setinformation] = useState([])   

    const keephandle = () => {
      if(phonenumbervalue=="" || wxnumbervalue=="" || zfbnumbervalue=="" || surenumbervalue=="" || numbervalue=="" || namevalue=="" || openvalue=="" || value==""){
        message.error('带"*"号的选项不能为空');
        console.log('带"*"号的选项不能为空');
      }else{
        let obj = {
          "账户类型":value,
          "开户行":openvalue,
          "开户人姓名":namevalue,
          "开户人账号":numbervalue,
          "确认账号":surenumbervalue,
          "支付宝账号":zfbnumbervalue,
          "微信账号":wxnumbervalue,
          "手机号":phonenumbervalue,
        }
        console.log("obj",obj);

        // 网络请求 添加数据  调用方法 把对象加进去数组里
        postsettlement(obj).then(res => {
          setinformation(
            information = [...information,obj]
          )
        })
        console.log(information);
        // 清空文本框的值
        setValue(
          value = ""
        )
        setopenValue(
          openvalue = ""
        )
  
        setnameValue(
          namevalue = ""
        )
  
        setnumberValue(
          numbervalue = ""
        )
  
        setsurenumberValue(
          surenumbervalue = ""
        )
  
        setzfbnumberValue(
          zfbnumbervalue = ""
        )
  
        setwxnumberValue(
          wxnumbervalue = ""
        )
  
        setphonenumberValue(
          phonenumbervalue = ""
        )

        message.success('已成功保存');
      }
      
    }

return (
<>
  <div className='setbox'>
  <span className='txt1'>
   <i className='Symbolred'>*</i><span>账户类型：</span>
  </span>
  <Radio.Group onChange={onChange} value={value}>
      <Radio value={"个人"}>个人</Radio>
      <Radio value={"企业"}>企业</Radio>
    </Radio.Group>
  </div>

  <Row gutter={[16, 16]}>
  <Col span={12}>
    <div className='setbox'>
    <span className='txt1'>
     <i className='Symbolred'>*</i><span>开户行：</span>
    </span>
       <Select
      defaultValue="选择开户银行"
      style={{
        width: 150,
      }}
      onChange={handleChange}
    >
      <Option value="中国工商银行">中国工商银行</Option>
      <Option value="中国招商银行">中国招商银行</Option>
      <Option value="中国建设银行">中国建设银行</Option>
      <Option value="中国农业银行4">中国农业银行</Option>
    </Select>
    </div>
    </Col>


    <Col span={12}>
    <div className='setbox'>
      <span className='txt1'>
        <i className='Symbolred'>*</i>
        <span>开户人姓名：</span>
      </span>
        <Input style={{width:"150px",height:"25px"}} 
         value={namevalue} onChange={e => setnameValue(e.target.value)}
        />
    </div>
    </Col>

    <Col span={12}>
    <div className='setbox'>
      <span className='txt1'>
      <i className='Symbolred'>*</i>
       <span>开户人账号：</span>
      </span>
        <Input style={{width:"150px",height:"25px"}}
         value={numbervalue} onChange={e => setnumberValue(e.target.value)}
        />
    </div>
    </Col>

    <Col span={12}>
    <div className='setbox'>
    <span className='txt1'>
        <i className='Symbolred'>*</i>
        <span>确认账号：</span>
    </span>
        <Input style={{width:"150px",height:"25px"}}
         value={surenumbervalue} onChange={e => setsurenumberValue(e.target.value)}
        />
    </div>
    </Col>

    <Col span={12}>
    <div className='setbox'>
    <span className='txt1'>
       <i className='Symbolred'>*</i>
       <span>支付宝账号：</span>
    </span>
        <Input style={{width:"150px",height:"25px"}}
         value={zfbnumbervalue} onChange={e => setzfbnumberValue(e.target.value)}
        />
    </div>
    </Col>

    <Col span={12}>
    <div className='setbox'>
    <span className='txt1'>
       <i className='Symbolred'>*</i>
       <span>微信账号：</span>
    </span>
        <Input style={{width:"150px",height:"25px"}}
         value={wxnumbervalue} onChange={e => setwxnumberValue(e.target.value)}
        />
    </div>
    </Col>
    
    <Col span={12}>
    <div className='setbox'>
    <span className='txt1'>
       <i className='Symbolred'>*</i>
       <span>结算成功后短信通知手机号：</span>
    </span>
        <Input style={{width:"150px",height:"25px"}}
          value={phonenumbervalue} onChange={e => setphonenumberValue(e.target.value)}
        />
    </div>
    </Col>

    <Col span={12}>
    <div className='setbox2'>
    <Button type="primary"
    style={{
      textAlign :'center'
    }}
    onClick={keephandle}
    >保存</Button>
    </div>
    </Col>

    </Row>

  
    </>

)}
